<template>
    <div>
        <el-form :inline="true" :model="bookSearch">
            <el-form-item label="书名">
                <el-input v-model="bookSearch.name" placeholder="书名"></el-input>
            </el-form-item>
            <el-form-item label="作者">
                <el-input v-model="bookSearch.author" placeholder="作者"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getBookData">查询</el-button>
                <el-button type="danger" @click="reset">重置</el-button>
                <el-button type="success" @click="openAddBookDialogHandler">新增</el-button>
            </el-form-item>
        </el-form>

        <el-table
            :data="bookData"
            style="width: 100%;" max-height="500" border empty-text="暂无数据">
            <el-table-column label="编号" prop="id" width="100pxx"></el-table-column>
            <el-table-column label="书名" prop="name" width="180pxx"></el-table-column>
            <el-table-column label="作者" prop="author" width="120pxx"></el-table-column>
            <el-table-column label="价格" prop="price" width="180pxx"></el-table-column>            
            <el-table-column label="销量" prop="sales" width="180pxx"></el-table-column>
            <el-table-column label="库存" prop="stock" width="180pxx"></el-table-column>
            <el-table-column label="图片">
                <template slot-scope="scope">
                    <img :src="scope.row.imgPath" alt="书籍参考图片" style="width: 50px; height: 50px;">
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" >
                <template slot-scope="scope">
                    <el-button type="primary" size="small" @click="openEditBook(scope.row)">编辑</el-button>
                    <el-button type="danger" size="small" @click="deleteBookHandler(scope.row.id);">删除</el-button>
                </template>                
            </el-table-column>
        </el-table>


        <my-dialog 
            :title="bookDialog.title" 
            :visible="bookDialog.visible" 
            :width="bookDialog.width"
            @handleCancel="handleAddBookCancel"
            @handleConfirm="handleAddBookConfirm">
            <template>
                <el-form :inline="true" :model="book">
                    <el-form-item label="书名">
                        <el-input v-model="book.name"></el-input>
                    </el-form-item>
                    <el-form-item label="作者">
                        <el-input v-model="book.author"></el-input>
                    </el-form-item>
                    <el-form-item label="价格">
                        <el-input-number v-model="book.price" :precision="2" :step="0.1"></el-input-number>
                    </el-form-item>
                    <el-form-item label="销量">
                        <el-input v-model="book.sales"></el-input>
                    </el-form-item>
                    <el-form-item label="库存"">
                        <el-input v-model="book.stock"></el-input>
                    </el-form-item>
            
                    <el-form-item label="图片">
                        <el-upload
                            class="img-uploader"
                            action="http://localhost:8080/api/qiniu/file/book/upload"
                            :show-file-list="false"
                            :data="{imgPath: book.imgPath}"
                            :on-success="handleImgSuccess"
                            :before-upload="beforeImgUpload">
                            <img v-if="book.imgPath" :src="book.imgPath" class="img">
                            <i v-else class="el-icon-plus img-uploader-icon"></i>
                        </el-upload>    
                    </el-form-item>                        
                </el-form>
            </template>
        </my-dialog>

        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNo"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            :total="total"
            layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
    </div>    
</template>

<script>

import { getBook } from '@/api/book';
import { deleteBook } from '@/api/book'
import MyDialog from '@/components/MyDialog/MyDialog.vue'
import { saveBook } from '@/api/book';
import { updateBook } from '@/api/book';

export default({
    name: 'Book',
    components: {
        MyDialog,
    },
    data() {
        return {
            bookSearch: {
                name: "",
                author: "",
                pageNo: 1,
                pageSize: 10
            },
            bookData: [],
            pageSize: 10,
            total: 100,
            pageNo: 1,
            bookDialog: {
                visible: false,
                title: "新增书籍",
                width: "500",               
            },
            book: {
                id: 0,
                name: '',
                author: '',
                price: 0,   
                sales: 0,
                stock: 0,
                imgPath: ''             
            }
        }
    },
   beforeMount() {
        this.getBookData()
   },
    methods: {        
        async getBookData() {            
            let res = await getBook(this.bookSearch)            
            if (res.code === 200) {
                this.bookData = res.data.records
                this.total = res.data.total
            }
        },
        reset() {
            this.bookSearch.name = ''
            this.bookSearch.author = ''
            this.getBookData()
        },
        handleSizeChange(pageSize) {
            this.pageSize = pageSize
            this.bookSearch.pageSize = pageSize
            this.getBookData()
        },
        handleCurrentChange(pageNo) {
            this.pageNo = pageNo
            this.bookSearch.pageNo = pageNo
            this.getBookData()
        },
        deleteBookHandler(id) {    
            this.$myconfirm("您确定要删除吗?", async () => {
                let res = await deleteBook(id)
                if (res.code === 200) {
                    this.getBookData()
                    this.$message.success(res.message)
                } else {
                    this.$message.error(res.message)
                }
            })                        
        },
        openAddBookDialogHandler() {
            this.bookDialog.title = "新增书籍"
            this.bookDialog.visible = true
            this.book = {
                id: 0,
                name: '',
                author: '',
                price: 0,   
                sales: 0,
                stock: 0,
                imgPath: ''  
            }
        },
        openEditBook(data) {
            this.bookDialog.title = "修改书籍"
            this.bookDialog.visible = true            
            this.book = data
        },
        async handleAddBookConfirm() {
            if (this.book.id !== 0) {
                let res = await updateBook(this.book)
                if (res.code === 200) {
                    this.$message.success(res.message)            
                    this.getBookData()
                    this.bookDialog.visible = false
                }else {
                    this.$message.error(res.message)
                }
            } else {
                let res = await saveBook(this.book)
                if (res.code === 200) {                
                    this.$message.success(res.message)            
                    this.getBookData()
                    this.bookDialog.visible = false
                } else {
                    this.$message.error(res.message)
                }
            }            
        },
        handleAddBookCancel() {
            this.bookDialog.visible = false
        },
        beforeImgUpload(file) {
            const isJPGorPNG = file.type === 'image/jpeg' || file.type === 'image/png';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPGorPNG) {
            this.$message.error('上传图片只能是JPG或PNG格式!');
            }
            if (!isLt2M) {
            this.$message.error('上传图片大小不能超过 2MB!');
            }

            return isJPGorPNG && isLt2M;
        },
        handleImgSuccess(res) {
            if (res.code === 200) {
                this.$message.success(res.message)
                this.book.imgPath = res.data
            } else {
                this.$message.error(res.message)
            }
        }
    }
})
</script>

<style scoped>
/* 确保表格宽度超过容器宽度时才会出现横向滚动条 */
.el-table__header-wrapper,
.el-table__body-wrapper,
.el-table__footer-wrapper {
  overflow: visible;
}

  .img-uploader {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .img-uploader:hover {
    border-color: #409EFF;
  }
  .img-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .img {
    width: 178px;
    height: 178px;
    display: block;
  } 

</style>
